<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>todo</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/vue.min.js"></script>
    <script href="js/jquery-1.7.2.min"></script>
    <script src="js/bootstrap.js"></script>
    <style>
      .done{
        color: green;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">ToList({{total}})</h3>
        </div>
        <div class="panel-body">
          <ul class="list-group">
            <li :class="{done:v.computed}" v-for="(v,index) in todos" class="list-group-item">{{v.title}}{{v.computed}}
                <button :class="v.computed?'btn-danger':'btn-success'" class="btn  btn-xs pull-right" @click="toggleState(index)">{{v.computed?'已完成':'完成'}}</button>
                <button class="btn btn-info btn-xs pull-right" @click="del(index)">删除</button>
            </li>
          </ul>

          <input type="text" class="form-control" v-model="newData.title">
          <br>
          <button class="btn btn-success" @click="addNews(newData)">添加</button>
        </div>
        <div class="panel-footer">

        </div>
      </div>
    </div>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data:{
          newData:{
            id:null,
            title:'',
            computed:false
          },
          todos:[{
            id:1,
            title:'吃饭',
            computed:false
          },
          {
            id:2,
            title:'睡觉',
            computed:false
          },
          {
            id:2,
            title:'打豆豆',
            computed:false
          },
          {
            id:2,
            title:'打羽毛球',
            computed:false
          }
        ]
        },
        methods:{
          addNews(data){
            this.todos.push(data);
            this.newData={
              id:null,
              title:'',
                computed:false
            }
          },
          toggleState(index){
            this.todos[index].computed=!this.todos[index].computed;
            console.log(index);
          },
          del(index){
            this.todos.splice(index,1)
          }
        },
        computed:{
          total(){
            return this.todos.length;
          }
        }
      })
    </script>
  </body>
</html>
